<template>
  <view>
    <view class="dhbox">
      <view class="kong"></view>
      <!-- 主tab栏 -->
      <view class="qh">
        <view v-for="(page, index) in pages" :key="index" class="qiu" @click="checked(index)">
          <view :class="{'active': current === index}">
            {{ page.title }}
          </view>
        </view>
      </view>
      <view class="kaijiang">开奖公告</view>
    </view>
    <!-- 足球页面内容 -->
    <view v-if="current === 0" class="saishiqiehuan">
      <!-- 子tab栏 -->
      <view class="tabbox">
        <view v-for="(tab, index) in tabs" :key="index" class="tab" @click="subChecked(index)">
          {{ tab }}
          <view v-if="subCurrent === index" class="tab-underline"></view>
        </view>
      </view>
      <!-- 子tab内容 -->
      <view v-if="subCurrent === 0" class="content">
        <!-- 滚动条部分 -->
        <view class="timebox">
          <view v-for="(item, index) in timeSlots" :key="index" class="time">
            <text class="text1">{{ item.dayName }}</text>
            <text class="text2">{{ item.date }}</text>
          </view>
        </view>
        <!-- 滚动条部分 -->
		<view class="bisai">
			<view class="riqi">
				<view class="text111">周二001.亚冠</view>
				<view class="text222">完场 08-13 20:00</view>
			</view>
			
			<view class="box">
				<view class="team">
					<view class="teamnr1">
						<view class="image1">
							<image class="img1" src="../../static/zhudui.png"></image>
						</view>
						<view class="text3">山东泰山</view>
					</view>
					<view class="teamnr2">
						<view class="text4">竞彩sp 2.50 3.20 2.40</view>
					</view>
				</view>
				<view class="bifen">
					<view class="text5">1:0</view>
					<view class="text6">上半场0:0</view>
				</view>
				<view class="team">
					<view class="teamnr1">
						<view class="image1">
							<image class="img1" src="../../static/kedui.png"></image>
						</view>
						<view class="text3">曼谷联</view>
					</view>
					<view class="teamnr2">
						<view class="text4">主（-1）5.55 4.45 1.38</view>
					</view>
				</view>
			</view>
		</view>
      </view>
      <view v-if="subCurrent === 1" class="content">
        <view class="page">北单页面内容</view>
      </view>
      <view v-if="subCurrent === 2" class="content">
        <view class="page">足彩页面内容</view>
      </view>
    </view>
    <!-- 篮球页面内容 -->
    <view v-if="current === 1" class="saishiqiehuan">
      <view class="page">篮球页面内容：暂无内容</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 0, // 默认选中第一个主tab
      subCurrent: 0, // 默认选中第一个子tab
      pages: [{
          index: 0,
          title: '足球'
        },
        {
          index: 1,
          title: "篮球"
        }
      ],
      tabs: ['竞彩', '北单', '足彩'], // 子tab标题数组
      today: new Date(),
      timeSlots: [] // 时间槽数组
    };
  },
  mounted() {
    this.generateTimeSlots();
  },
  methods: {
    checked(index) {
      this.current = index;
      this.subCurrent = 0; // 当切换主tab时，重置子tab
    },
    subChecked(index) {
      this.subCurrent = index;
    },
    updateDate(date, days) {
      const result = new Date(date);
      result.setDate(result.getDate() + days);
      return result;
    },
    formatDate(date) {
      const day = date.getDate().toString().padStart(2, '0');
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      return `${month}.${day}`;
    },
    getDayName(date) {
      const days = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
      return days[date.getDay()];
    },
    generateTimeSlots() {
      for (let i = -3; i <= 4; i++) {
        const date = this.updateDate(this.today, i);
        const formattedDate = this.formatDate(date);
        const dayName = this.getDayName(date);
        this.timeSlots.push({ dayName, date: formattedDate });
      }
    }
  }
};
</script>

<style>
/* 其他样式保留，只添加或修改相关滚动条部分的样式 */
.timebox {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: auto; /* 允许在需要时出现滚动条 */
  scrollbar-width: none; /* Firefox 去除滚动条 */
}

.timebox::-webkit-scrollbar {
  display: none; /* Chrome, Safari 和 Opera 去除滚动条 */
}

.time {
  flex: 0 0 25%;
  width: 25%;
  text-align: center;
  font-size: 26rpx;
  color: #7e7e7e;
  scroll-snap-align: start;
}

.text1, .text2 {
  display: block;
}




		.riqi {
			display: flex;
			padding: 2%;
		}

		.text111 {
			font-size: 30rpx;
			margin-right: 3%;
			color: #7e7e7e;
		}

		.text222 {
			font-size: 30rpx;
			color: red;
		}

		.box {
			width: 96%;
			display: flex;
			padding: 2%;
		}

		.team {
			width: 35%;
			padding: 2.5%;
		}

		.teamnr1 {
			display: flex;
			padding: 2%;
		}

		.image1 {
			width: 25%;
			margin-right: 4%;
		}

		.img1 {
			width: 100%;
			height: 60rpx;
		}

		.text3 {
			font-size: 32rpx;
		}

		.teamnr2 {
			padding: 2%;
		}

		.text4 {
			font-size: 20rpx;
			color: #7e7e7e;
		}

		.bifen {
			width: 16%;
			padding: 2%;
		}

		.text5 {
			font-size: 45rpx;
			color: red;
		}

		.text6 {
			font-size: 24rpx;
			color: red;
		}



.dhbox {
		width: 96%;
		display: flex;
		background: red;
		border: 1px solid wheat;
		padding: 2%;
		/* 		justify-content: space-between; */
	}

	.kong {
		width: 30%;
		height: 15px;
		/* background: yellow; */
	}

	.qh {
		/* display: flex;
		width: 40%;
		background-color: #e96867;
		border-radius: 30rpx;
		height: 50rpx;
		align-items: center; */

		width: 159px;
		height: 32px;
		background: #e96867;
		border-radius: 16px;
		line-height: 32px;
		display: flex;
	}

	.qiu {
		width: 50%;
		font-size: 30rpx;
		color: white;
		text-align: center;
		cursor: pointer;
	}

	.kaijiang {
		width: 26%;
		color: white;
		font-size: 30rpx;
		text-align: center;
		padding: 2%;
		cursor: pointer;
	}

	/* tab栏样式 */
		.tabbox {
			width: 94%;
			background-color: red;
			display: flex;
			padding: 3%;
			justify-content: space-around;
		}

		.tab {
			color: white;
			text-align: center;
			font-size: 30rpx;
			cursor: pointer;
			position: relative;
		}

		.active {
			/* background-color: white;
		color: red;
		border-radius: 30rpx;
		border: 2rpx solid red;
		padding: 3%;
		width: 105%;
		height: 50rpx; */

			border-radius: 16px;
			/* 		    display: inline-block; */
			background: #fff;
			color: #e02826;
			width: 87px;
		}

		.tab-underline {
			content: "";
			position: absolute;
			width: 116rpx;
			height: 8rpx;
			background-color: #fce9e9;
			/* left: 0px; */
			right: -15px;
			bottom: -4px;
			margin: -8px auto;
		}
		.box {
			width: 96%;
			display: flex;
			padding: 2%;
		}

		.team {
			width: 35%;
			padding: 2.5%;
		}

		.teamnr1 {
			display: flex;
			padding: 2%;
		}

		.image1 {
			width: 25%;
			margin-right: 4%;
		}

		.img1 {
			width: 100%;
			height: 60rpx;
		}

		.text3 {
			font-size: 32rpx;
		}

		.teamnr2 {
			padding: 2%;
		}

		.text4 {
			font-size: 20rpx;
			color: #7e7e7e;
		}

		.bifen {
			width: 16%;
			padding: 2%;
		}

		.text5 {
			font-size: 45rpx;
			color: red;
		}

		.text6 {
			font-size: 24rpx;
			color: red;
		}

		.content {
			width: 100%;
			height: 70vh;
			/* background-color: paleturquoise;
		display: flex;
		justify-content: center;
		align-items: center; */
		}

		.page {
			width: 100%;
			height: 100%;
			background-color: #f0f0f0;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			color: #333;
		}
</style>